import React, { forwardRef } from "react";
import styled from "@emotion/styled";
import { duration, easing, radius, spacing } from "../utils/design-tokens";

// 按钮尺寸类型
type ButtonSize = "small" | "medium" | "large";
// 按钮变体类型
type ButtonVariant =
  | "primary"
  | "secondary"
  | "danger"
  | "success"
  | "warning"
  | "info"
  | "ghost"
  | "outline";

// 按钮组件样式
const ButtonElement = styled.button<{
  $variant: ButtonVariant;
  $size: ButtonSize;
  $fullWidth?: boolean;
  $isLoading?: boolean;
}>`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: ${spacing["2"]};
  font-weight: 500;
  border-radius: 6px;
  transition: background-color ${duration.fast}ms ${easing.ease},
    border-color ${duration.fast}ms ${easing.ease},
    color ${duration.fast}ms ${easing.ease};
  cursor: pointer;
  position: relative;
  outline: none;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  width: ${({ $fullWidth }) => ($fullWidth ? "100%" : "auto")};
  /* 移动端优化 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;

  // 禁用状态
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }

  // 加载状态
  ${({ $isLoading }) =>
    $isLoading &&
    `
    pointer-events: none;
    
    & > *:not(.loading-spinner) {
      opacity: 0.7;
    }
  `}

  // 尺寸样式
  ${({ $size }) => {
    switch ($size) {
      case "small":
        return `
          padding: ${spacing["2"]} ${spacing["4"]};
          font-size: 0.875rem;
          min-height: 2rem;
          min-width: 44px;
          
          @media (max-width: 768px) {
            padding: 0.375rem ${spacing["3"]};
            font-size: 0.8125rem;
            min-height: 36px;
            min-width: 36px;
          }
        `;
      case "large":
        return `
          padding: ${spacing["3"]} ${spacing["6"]};
          font-size: 1.125rem;
          min-height: 3rem;
          
          @media (max-width: 768px) {
            padding: ${spacing["2"]} ${spacing["4"]};
            font-size: 0.9375rem;
            min-height: 44px;
          }
        `;
      default: // medium
        return `
          padding: ${spacing["2"]} ${spacing["5"]};
          font-size: 0.95rem;
          min-height: 2.5rem;
          min-width: 44px;
          
          @media (max-width: 768px) {
            padding: 0.5rem ${spacing["3"]};
            font-size: 0.875rem;
            min-height: 40px;
            min-width: 40px;
          }
        `;
    }
  }}

  // 变体样式
  ${({ $variant }) => {
    switch ($variant) {
      case "primary":
        return `
          background-color: var(--accent-color);
          color: white;
          border: 1px solid var(--accent-color);
          
          &:hover:not(:disabled) {
            background-color: var(--accent-color-hover);
            border-color: var(--accent-color-hover);
          }
        `;
      case "secondary":
        return `
          background-color: var(--bg-secondary);
          color: var(--text-primary);
          border: 1px solid var(--border-color);
          
          &:hover:not(:disabled) {
            background-color: var(--bg-tertiary);
            border-color: var(--accent-color);
          }
        `;
      case "danger":
        return `
          background-color: var(--error-color);
          color: white;
          border: 1px solid var(--error-border);
          
          &:hover:not(:disabled) {
            background-color: var(--error-hover);
            border-color: var(--error-hover);
          }
        `;
      case "success":
        return `
          background-color: var(--success-color);
          color: white;
          border: 1px solid var(--success-border);
          
          &:hover:not(:disabled) {
            background-color: var(--success-hover);
            border-color: var(--success-hover);
          }
        `;
      case "warning":
        return `
          background-color: var(--warning-color);
          color: white;
          border: 1px solid var(--warning-border);
          
          &:hover:not(:disabled) {
            background-color: var(--warning-hover);
            border-color: var(--warning-hover);
          }
        `;
      case "info":
        return `
          background-color: var(--info-color);
          color: white;
          border: 1px solid var(--info-border);
          
          &:hover:not(:disabled) {
            background-color: var(--info-hover);
            border-color: var(--info-hover);
          }
        `;
      case "ghost":
        return `
          background-color: transparent;
          color: var(--text-primary);
          border: 1px solid transparent;
          
          &:hover:not(:disabled) {
            background-color: rgba(var(--accent-rgb), 0.08);
            color: var(--accent-color);
          }
        `;
      case "outline":
        return `
          background-color: transparent;
          color: var(--accent-color);
          border: 1px solid var(--accent-color);
          
          &:hover:not(:disabled) {
            background-color: rgba(var(--accent-rgb), 0.1);
            border-color: var(--accent-color-hover);
          }
        `;
      default:
        return "";
    }
  }}

  // 聚焦样式
  &:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
  }
`;

// 加载旋转器
const LoadingSpinner = styled.div`
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: ${radius.full};
  animation: spin 1s linear infinite;

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
`;

// 按钮属性接口
export interface ButtonProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  fullWidth?: boolean;
  isLoading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  children?: React.ReactNode;
}

// 按钮组件
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      variant = "secondary",
      size = "medium",
      fullWidth = false,
      isLoading = false,
      leftIcon,
      rightIcon,
      children,
      disabled,
      ...props
    },
    ref
  ) => {
    return (
      <ButtonElement
        ref={ref}
        $variant={variant}
        $size={size}
        $fullWidth={fullWidth}
        $isLoading={isLoading}
        disabled={disabled || isLoading}
        {...props}
      >
        {isLoading && <LoadingSpinner className="loading-spinner" />}
        {leftIcon && !isLoading && leftIcon}
        {children}
        {rightIcon && !isLoading && rightIcon}
      </ButtonElement>
    );
  }
);

Button.displayName = "Button";

export default Button;
